<template>
    <div class="adminPage">
        <p class="title">权限管理</p>
        <div>
            <!-- <el-scrollbar height="100vh"> -->
            <el-collapse>
                    <el-collapse-item title="管理员" class="role">
                    <div class="card" v-for="item in admin" :key="item">
                        <div class="left">
                            <i class="yuan">{{ item.username.slice(0,2) }}</i>
                            <div>
                                <p>{{ item.username }}</p>
                                <p>{{ item.email }}</p>
                            </div>
                        </div>
                        <div class="right">
                            <el-button type="danger" @click="cancelAdmin(item.id)" v-admin="[role,1]">取消管理员</el-button>
                        </div>
                    </div>
                </el-collapse-item>
                    <el-collapse-item title="普通用户" class="role">
                    <div class="card" v-for="item in userData" :key="item">
                        <div class="left">
                            <i class="yuan">{{ item.username.slice(0,2) }}</i>
                            <div>
                                <p>{{ item.username }}</p>
                                <p>{{ item.email }}</p>
                            </div>
                        </div>
                        <div class="right">
                            <el-button type="primary" @click="addAdmin(item.id)" id="active">设为管理员</el-button>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script setup>
import { onMounted,ref } from "vue";
import { adminData,setAdmin,cancleAdmin } from '@/apis/role'
import { ElMessage } from 'element-plus';
const admin = ref()
const userData = ref()
const role = ref('user')
onMounted(()=>{
    getData()
})

const getData = async ()=>{
    const res = await adminData()
    if(res){
        role.value = res.data.role
        admin.value = res.data.data.filter(item => item.role === 'admin')
        userData.value = res.data.data.filter(item => item.role === 'user')
    }
}

const cancelAdmin = async (id)=>{
    if(role.value === 'boss'){
        const res = await cancleAdmin(id)
        ElMessage({ 
            type: res && res.data.status === 200 ? 'success' : 'error', 
            message:res && res.data.message ? res.data.message : '操作失败'
        })
        if(res.data.status === 200) getData()
    }
}

const addAdmin = async (id)=>{
    const res = await setAdmin(id)
    ElMessage({ 
        type: res && res.data.status === 200 ? 'success' : 'error', 
        message:res && res.data.message ? res.data.message : '操作失败'
    })
    if(res.data.status === 200) getData()
}
</script>


<style scoped lang="less">
.adminPage{
    height: 100%;
    padding-bottom: 4rem ;
    overflow: scroll;
}
.title{
    font-weight: bold;
    font-size: 1.3rem;
    text-align: center;
    margin: 0.6rem 0;
}

.role{
    font-weight: 700;
    color:#514f4f;
    padding: 0 0 0 1rem;
}

.card{
    display: flex;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 0.4rem 0;
    justify-content: space-between;
    align-items: center;
    .left{
        display: flex;
    }
    .right{
        margin-right: 0.8rem;
    }
    i{
        width: 3rem;
        height: 3rem;
        background-color: #ec7575;
        border-radius: 50%;
        margin-left: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#f0f0f0;
        margin-right: 0.6rem;
    }
}

.el-button--danger#active{
    cursor:not-allowed;
    border-color: #ffcccc;
    background-color: #ff9a9a;
}
</style>